import React, { Component } from 'react'

// 子组件1
const Fn = (props) => {
  console.log('函数组件接受父组件传值', props)
  const changeMoney = (num) => {
    props.changeMoney(num)
  }
  return (
    <div>
      <h2>我是函数组件</h2>
      <h3>收到父组件的值{props.money}</h3>
      <button onClick={() => changeMoney(5000)}>修改money</button>
    </div>
  )
}

// 子组件 类
class Cla extends Component {
  render() {
    console.log('类组件接受父组件传值', this.props)
    return (
      <div>
        <h2>标题:我是类组件</h2>
        <h3>收到父组件的值{this.props.money}</h3>
        <button onClick={() => this.props.changeMoney(1000)}>修改money</button>
      </div>
    )
  }
}
// 父组件
class App extends Component {
  state = {
    money: 10,
  }
  changeMoney = (money) => {
    this.setState({
      money,
    })
  }
  html = (<p>123</p>)
  render() {
    return (
      <div>
        <h1>父组件</h1>
        <hr />
        <Fn money={this.state.money} changeMoney={this.changeMoney}></Fn>
        <Cla
          money={this.state.money}
          changeMoney={this.changeMoney}
          html={this.html}></Cla>
      </div>
    )
  }
}
export default App
